<!--
 * @Author: anxia.ack anchenkai@come-future.com
 * @Date: 2025-05-01 11:16:01
 * @LastEditors: anxia.ack anchenkai@come-future.com
 * @LastEditTime: 2025-05-07 22:09:33
 * @FilePath: /free-learning-front/src/components/MyRate.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div
    class="rate-container"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
    @mousemove="handleMouseMove"
    @click="handleClick"
    :class="{ 'rate-disabled': disabled }"
  >
    <div class="dissatisfaction">
      <img
        v-if="linghtType === '1' || clickType === '1'"
        src="@/assets/svg/dissatisfaction.svg"
        alt="不满意"
        data-type="1"
      />
      <img
        src="@/assets/svg/dissatisfaction-gray.svg"
        alt="不满意gray"
        v-else
        data-type="1"
      />
    </div>
    <div class="ordinary">
      <img
        src="@/assets/svg/ordinary.svg"
        alt="普通"
        v-if="linghtType === '2' || clickType === '2'"
        data-type="2"
      />
      <img
        src="@/assets/svg/ordinary-gray.svg"
        alt="普通gray"
        v-else
        data-type="2"
      />
    </div>
    <div class="satisfaction">
      <img
        src="@/assets/svg/satisfaction.svg"
        alt="满意"
        v-if="linghtType === '3' || clickType === '3'"
        data-type="3"
      />
      <img
        src="@/assets/svg/satisfaction-gray.svg"
        alt="满意gray"
        v-else
        data-type="3"
      />
    </div>
    <div class="des-text">
      {{
        clickType === "3"
          ? "很满意！"
          : clickType === "2"
          ? "一般般！"
          : clickType === "1"
          ? "不满意！"
          : ""
      }}
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
const props = defineProps<{
  modelValue: string;
  disabled?: boolean;
}>();
const emit = defineEmits(["update:modelValue"]);
defineOptions({
  name: "MyRate",
});
const linghtType = ref(props.modelValue);
const clickType = ref(props.modelValue);
const isEnterContainer = ref(false);

// 监听 modelValue 的变化
watch(() => props.modelValue, (newVal) => {
  linghtType.value = newVal;
  clickType.value = newVal;
});

const handleMouseEnter = (e: MouseEvent) => {
  if (props.disabled) return;
  isEnterContainer.value = true;
};
const handleMouseLeave = (e: MouseEvent) => {
  if (props.disabled) return;
  isEnterContainer.value = false;
  linghtType.value = clickType.value;
};
const handleMouseMove = (e: any) => {
  if (props.disabled) return;
  if (isEnterContainer.value) {
    linghtType.value = e.target?.dataset?.type || "";
  }
};
const handleClick = (e: any) => {
  if (props.disabled) return;
  const type = e.target?.dataset?.type;
  if (!type) return;
  
  linghtType.value = type;
  clickType.value = type;
  emit("update:modelValue", type);
};
</script>
<style>
.rate-container {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 10px;
}
.rate-container > div {
  margin-right: 20px;
}
.rate-container img {
  width: 45px;
  cursor: pointer;
}
.rate-disabled img {
  cursor: default;
}
.des-text {
  color: gray;
  font-size: 13px;
}
</style>
